import React from 'react';
import './comment.scss';
import { LikeOutline, MessageOutline } from 'antd-mobile-icons';
import { CommentInfo, CommentFollow, CommentShowReply, CommentProps } from './commentProps';

const defaultProps: CommentProps = {
    commentInfo: {
        content: "",
        nickName: "Nemo",
        score: 5,
        avatar: "",
        commentTime: "2025-01-01",
        reply: 1,
        like: 1,
        sku: "",
        likeBtn: true
    }

}

const Comment: React.FC<CommentProps> = (props) => {
    const {
        commentInfo,
        shopReply,
        follow,
        ...rest
    } = {
        ...defaultProps,
        ...props
    };

    // console.log(commentInfo);
    return (
        <div style={{ backgroundColor: '#f6f6f6', height: '100%', width: '100%' }}>
            <div className="seal-comment">
                <div className="seal-comment-head">
                    <div className="seal-comment-head__left">
                        {commentInfo?.avatar && (
                            <div className="seal-comment-head__user-avatar">
                                <img src={commentInfo.avatar} alt="" />
                            </div>)
                        }

                    </div>
                    <div className="seal-comment-head__right">
                        <div className="seal-comment-head__user">
                            <div className='seal-comment-head__user-name'>
                                {commentInfo?.nickName && <span>{commentInfo.nickName}</span>}
                            </div>
                            <div className="seal-comment-head__time">{commentInfo?.commentTime}</div>
                        </div>
                        <div className="seal-comment-head-score">
                            <div className='seal-comment-head-score-item'></div>
                            {
                                commentInfo?.sku &&
                                <div className='seal-comment-head-score-item'>
                                    <div className='seal-comment-head-score-item-line'>{commentInfo?.sku}</div>
                                </div>
                            }
                        </div>
                    </div>
                </div>

                <div className="seal-comment-content">
                    {commentInfo?.content}
                </div>

                <div className='seal-comment-multiple-img'>
                    {
                        commentInfo?.images?.map((item, index) => {
                            return (
                                <div className='seal-comment-multiple-img__item' key={index}>
                                    <img src={item} alt="" />
                                </div>
                            )
                        })
                    }
                </div>

                <div className="seal-comment-footer">
                    <div className='seal-comment-footer__left'>
                    </div>
                    <div className='seal-comment-footer__right'>
                        {
                            commentInfo?.likeBtn && (
                                <><div className='seal-comment-footer__right__btn'>
                                    <MessageOutline width={20} height={20} />
                                </div>
                                    <div className='seal-comment-footer__right__btn'>
                                        <LikeOutline width={20} height={20} />
                                    </div>
                                </>

                            )
                        }
                    </div>
                </div>

                <div className='seal-comment-follow'>
                    {
                        follow && (
                            <>
                                <div className='seal-comment-follow-title'>购买后49天后追评</div>
                                <div className='seal-comment-content'>
                                    {follow.content}
                                </div>
                            </>
                        )

                    }

                </div>

                <div className='seal-comment-reply'>
                    {
                        shopReply?.map((item, index) =>
                            <div className='seal-comment-reply__item' key={index}>
                                <div className="seal-comment-head">
                                    <div className="seal-comment-head__left">
                                        {item?.avatar && (
                                            <div className="seal-comment-head__user-avatar">
                                                <img src={item.avatar} alt="" />
                                            </div>
                                        )
                                        }
                                    </div>

                                    <div className="seal-comment-head__right">
                                        <div className="seal-comment-head__user">
                                            <div className='seal-comment-head__user-name'>
                                                {item.nickName && <span>{item.nickName}</span>}
                                            </div>
                                            <div className="seal-comment-head__time">
                                                {item.commentTime}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {
                                    item.content && <div className='seal-comment-content'>{item.content}</div>
                                }
                            </div>
                        )
                    }
                </div>
            </div>
        </div>
    )
}

export default Comment;